<template>
    <div class="post-common-panel">
        <Avatar
            :width="avatatWidth"
            :userId="userId"
        ></Avatar>
        <div class="comment-form">
            <el-form
                :model="formData"
                :rules="rules"
                ref="formDataRef"
                @submit.prevent
            >
                <!--textarea输入-->
                <el-form-item
                    label=""
                    prop="content"
                >
                    <el-input
                        clearable
                        :placeholder="placeholderInfo"
                        type="textarea"
                        :maxlength="800"
                        resize="none"
                        show-word-limit
                        v-model="formData.content"
                    ></el-input>
                    <div
                        class="insert-img"
                        v-if="showInsertImg"
                    >
                        <div
                            class="pre-img"
                            v-if="commentImg"
                        >
                            <CommentImage :src="commentImg"></CommentImage>
                            <span
                                class="iconfont icon-remove"
                                @click="removeImg"
                            ></span>
                        </div>
                        <el-upload
                            v-else
                            name="file"
                            :show-file-listf="false"
                            accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
                            :multiple="false"
                            :http-request="selectImg"
                        >
                            <span class="iconfont icon-image"></span>
                        </el-upload>
                    </div>

                </el-form-item>
            </el-form>
        </div>
        <div
            class="send-btn"
            @click="postCommentDo"
        >发表</div>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import CommentImage from './CommentImage.vue';
const { proxy } = getCurrentInstance();

const props = defineProps({
    articleId: {
        type: String,
    },
    pCommentId: {
        type: Number,
    },
    replyUserId: {
        type: String,
    },
    avatatWidth: {
        type: Number,
        default: 50,
    },
    userId: {
        type: String,
    },
    showInsertImg: {
        type: Boolean,
        default: false,
    },
    placeholderInfo: {
        type: String,
        default: "请文明发言~",
    },
});

const api = {
    postComment: "/comment/postComment",
};

// form信息
const formData = ref({});
const formDataRef = ref({});

const checkPostComment = (rule, value, callback) => {
    if (value == null && formData.value.image == null) {
        callback(new Error("rule.message"));
    } else {
        callback();
    }
}

const rules = {
    content: [{ required: true, message: "请输入评论内容", validator: checkPostComment }, { min: 5, message: "评论内容不少于5个字" }],
};

// 发表评论
const emit = defineEmits(["postCommentFinish"]);
const postCommentDo = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;
        }
        let params = Object.assign({}, formData.value)
        params.articleId = props.articleId;
        params.pCommentId = props.pCommentId;
        params.replyUserId = props.replyUserId;

        let result = await proxy.Request({
            url: api.postComment,
            params,
        })
        if (!result) {
            return;
        }
        proxy.Message.success("评论成功");
        removeImg();
        formDataRef.value.resetFields();
        emit("postCommentFinish", result.data);
    })
};

// 选择图片
const commentImg = ref(null);
const selectImg = (file) => {
    file = file.file;
    let img = new FileReader();
    img.readAsDataURL(file);
    img.onload = ({ target }) => {
        commentImg.value = target.result;
        formData.value.image = file;
    }
};

// 删除图片
const removeImg = () => {
    commentImg.value = null;
    formDataRef.value.image = null;
};
</script>

<style lang="scss" scoped>
.post-common-panel {
    display: flex;


    .comment-form {
        flex: 1;
        margin: 0px 10px;

        .el-textarea__inner {
            min-height: 60px !important;
        }

        .insert-img {
            line-height: 10px;

            .iconfont {
                margin-top: 10px;
                font-size: 20px;
                color: #909399;
                cursor: pointer;
            }

            .pre-img {
                position: relative;
                margin-top: 10px;

                .iconfont {
                    position: absolute;
                    top: -10px;
                    right: -10px;
                    color: #aaaaaa;
                }
            }
        }
    }

    .send-btn {
        background: var(--link);
        color: #fff;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border-radius: 5px;
        cursor: pointer;
    }
}
</style>
